import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './cooperations.css'
import { AtList, AtListItem, AtButton, AtIcon,AtSearchBar,AtSwipeAction } from "taro-ui"
import { $redirectTo, getGlobalData } from '../../../../global';
import app from '../../../../main.js'
// import reactMixin from 'react-mixin';
// import myJs from '../../pages/cooperations/cooperationsjs.js'
export default class Cooperations extends Component {

  config = {
    navigationBarTitleText: '协作成员'
  }
  constructor () { 
    super(...arguments); 
    this.state = {
      cooperation_doctors: [],
      textA:'font-size: 18px ; color:black' ,
      textB:'font-size: 15px ; color:#6d6d6d;',
      value:'',
      id: this.$router.params.id,
      ids:[],
    };
  } 

  componentWillMount () {
    this.getCooperationDoctors();
  }

  offset = 0; 
  length = 20;

   getCooperationDoctors() {
    let me = this;
    let arr = [];
    app.get('web/case_cooperation/cooperation_doctors', {offset: this.offset, length:this.length ,id: this.state.id}, function(res) {
      let data = res.data;
      me.setState({
        cooperation_doctors: data.result.list		
	    },()=>{
          for(let val of me.state.cooperation_doctors){
              arr.push(val.id)
          }
          me.setState({
              ids:arr
          })
      })
      console.log(res);
    });
  }

  cooperationsInvite = () => {
    app.navigateTo('../teaminvite/teaminvite?id='+this.state.id+'&ids='+JSON.stringify(this.state.ids));
  }

  onChange (value) {
    this.setState({
      value: value
    })
  }

   //删除一个标签
   deleteOption(itemid,index){
        let me = this;
        let arr = me.state.cooperation_doctors;
        let ids = itemid;
        let id = me.state.id;
        arr.splice(index,1)
        let data = {
            id:id,
            cooperator_id:ids
        }
        me.setState({
            cooperation_doctors:arr
        })
        app.post('web/case_cooperation/delete',data,function(res){

        })
    }

  render() {

    let contact_list = this.state.cooperation_doctors.map((item,index) => {
      return (
        <AtSwipeAction
        onClick={this.deleteOption.bind(this,item.id,index)}
        autoClose={false}
        options={[
            {
                text: '删除',
                style: {
                backgroundColor: '#FF4949'
                }
            }
        ]}>
            <View class='information'> 
                <Image className='head' src={app.getPath(item.head_image)}/>
                <View className='box'>
                <View className='name' style={this.state.textA}>{item.name}</View>
                <View className='doctor' style={this.state.textB}>{item.positional_title}</View>
                </View>
                <View className='box-a'>
                <View className='hospital' style={this.state.textB}>{!app.isEmpty(item.hospital) ? item.hospital : ''}</View>
                </View>
            </View>
        </AtSwipeAction>
      )
    });

    return (
      <View id='cooperations'>

        <View className='box-b'>
          <AtSearchBar value={this.state.value} onChange={this.onChange.bind(this)} />
        </View>
          
        <View className='box-d'>
          <View className='text'> 当前病例协作成员（{this.state.cooperation_doctors.length} 人）</View>
        </View>

        {contact_list}

        <View className='btn'>
          <AtButton full={true} type='primary' size='normal' className='btn-son' onClick={this.cooperationsInvite}>
            <AtIcon value='add-circle' size='30' color='white' className="btn-icon"></AtIcon>邀请协作成员
          </AtButton>
        </View>
      </View>
    )
  }
}
// reactMixin.onClass(Cooperations,myJs);
